<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      width: 600px;
      height: 500px;
      background-color: orange;

      display: flex;
    }

    .item {
      /* 每个盒子的基础大小 */
      width: 120px;
      height: 120px;
      /*flex-grow 决定了 flex items 如何扩展(拉伸/成长)
        可以设置任意非负数字（正小数、正整数、0），默认值是 0
        当 flex container 在 main axis 方向上有剩余 size 时，flex-grow 属性才会有效
        如果所有 flex items 的 flex-grow 总和 sum 超过 1，每个 flex item 扩展的 size 为 
        flex container 的剩余 size * flex-grow / sum */

      /* 简单来说，就是将剩下空间进行等分 */
      flex-grow: 0;
    }

    /* 首先将所有设置了flex-grow的值累加起来，下面累加起来是3，那么剩下空间会分三分
       然后根据每个盒子自己设置了多少值，就去分
    */
    .item1 {
      /* 这个数字就是剩下空间分几份的意思 */
      flex-grow: 0;
      /* 成长后的尺寸是不能大于设置的最大值的 */
      max-width: 180px;
    }
    .item2{
      flex-grow: 1;
      max-width: 180px;
    }
    .item3{
      flex-grow: 1;
      max-width: 180px;
    }
  </style>
</head>
<body>
  
  <div class="container">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
  </div>

  <script src="./js/itemRandomColor.js"></script>
</body>
</html>